<template>
	<view class="container">
		<pageMetaVue></pageMetaVue>
		<!-- 编辑区域 -->
		<view class="edit-content">
			<view class="section-title">基本信息</view>
			<!-- 头像编辑 -->
			<view class="edit-item avatar-item" @click="changeAvatar">
				<text class="item-label">头像</text>
				<view class="avatar-wrapper">
					<image class="avatar" :src="formData.image" mode="aspectFill"></image>
					<view class="avatar-mask">
						<uni-icons type="camera" size="20" color="#fff"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 用户名编辑 -->
			<view class="edit-item">
				<text class="item-label">用户名</text>
				<input type="text" v-model="formData.name" class="input" placeholder="请输入用户名" />
			</view>

			<!-- ID号展示 -->
			<view class="edit-item">
				<text class="item-label">ID号</text>
				<text class="id-text">{{formData.id}}</text>
			</view>

			<!-- 收益信息区域 -->
			<block v-if="isDetele==0">
				<view class="section-title">收益信息</view>
				<!-- 今日收益展示 -->
				<view class="edit-item">
					<text class="item-label">今日收益</text>
					<text class="id-text income-text">{{formData.follows}}</text>
				</view>
				<!-- 昨日收益展示 -->
				<view class="edit-item">
					<text class="item-label">昨日收益</text>
					<text class="id-text income-text">{{formData.fans}}</text>
				</view>
				<!-- 总金额展示 -->
				<view class="edit-item">
					<text class="item-label">总金额</text>
					<text class="id-text income-text">{{formData.total}}</text>
				</view>
			</block>

			<!-- 设置与帮助区域 -->
			<view class="section-title">设置与帮助</view>

			<!-- 清除缓存 -->
			<view class="edit-item" @click="clearCache">
				<text class="item-label">清除缓存</text>
				<view class="item-right">
					<text class="cache-size">{{cacheSize}}</text>
					<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
				</view>
			</view>

			<!-- 关于我们 -->
			<view class="edit-item" @click="showAboutUs">
				<text class="item-label">关于我们</text>
				<view class="item-right">
					<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
				</view>
			</view>

			<!-- 隐私协议 -->
			<view class="edit-item" @click="showPrivacyPolicy">
				<text class="item-label">隐私协议</text>
				<view class="item-right">
					<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 底部保存按钮 -->
		<view class="bottom-save">
			<button class="save-button" @click="saveProfile">保存</button>
		</view>

		<!-- 关于我们弹窗 -->
		<uni-popup ref="aboutUsPopup" type="center">
			<view class="popup-content">
				<view class="popup-title">关于我们</view>
				<view class="popup-text">
					<view class="about-logo">
						<image src="/static/tabbar/profile-active.png" mode="aspectFit"></image>
					</view>
					<view class="about-info">
						<text class="app-name">又想要了</text>
						<text class="app-version">版本 1.0.0</text>
					</view>
					<view class="about-desc">
						<text>我们致力于为用户提供高质量的社交平台，让您足不出户即可享受乐趣。</text>
						<text class="contact-info">联系我们: 646216692@qq.com</text>
					</view>
				</view>
				<button class="popup-btn" @click="closePopup('aboutUsPopup')">关闭</button>
			</view>
		</uni-popup>

		<!-- 隐私协议弹窗 -->
		<uni-popup ref="privacyPopup" type="center">
			<view class="popup-content privacy-popup">
				<view class="popup-title">隐私协议</view>
				<scroll-view scroll-y class="privacy-content">
					<view class="privacy-text">
						<text class="privacy-subtitle">1. 信息使用</text>
						<text class="privacy-paragraph">您的信息将用于提供和改进我们的服务，包括个性化推荐、客户服务和安全保障等。</text>

						<text class="privacy-subtitle">2. 信息分享</text>
						<text class="privacy-paragraph">除非获得您的明确许可，或法律要求，否则我们不会与第三方共享您的个人信息。</text>

						<text class="privacy-subtitle">3. 信息保护</text>
						<text class="privacy-paragraph">我们采取合理的安全措施保护您的个人信息不被未授权访问、使用或泄露。</text>

						<text class="privacy-subtitle">4. Cookie使用</text>
						<text class="privacy-paragraph">我们使用Cookie技术提升您的浏览体验。</text>
					</view>
				</scroll-view>
				<button class="popup-btn" @click="closePopup('privacyPopup')">我已阅读并同意</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getUserDetail,
		setUserDetail,
		uploadUrl,
		getSetings
	} from "@/request/API.js";
	import pageMetaVue from '../../compents/page-meta/page-meta.vue';
	export default {
		data() {
			return {
				formData: {},
				isDetele: 0,
				cacheSize: '0KB'
			}
		},
		components: {
			pageMetaVue
		},
		created() {
			this.init();
			this.calculateCacheSize();
		},
		onLoad() {
			// 设置导航栏标题
			uni.setNavigationBarTitle({
				title: '编辑资料'
			});
			// 设置导航栏文字颜色
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			});
		},
		methods: {
			async init() {
				let code = await getSetings();
				this.isDetele = code.data.isDelete;
				let id = uni.getStorageSync("userId");
				const {
					data
				} = await getUserDetail(id);
				this.formData = data;
			},
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.uploadFile({
							url: uploadUrl, // 后端接口地址
							filePath: res.tempFilePaths[0], //选取图片
							name: 'file', //文件名称可以自定义
							success: ({
								data
							}) => {
								console.log(JSON.parse(data).data);
								this.formData.image = JSON.parse(data).data;
							}
						});
					}
				})
			},
			async saveProfile() {
				let res = await setUserDetail({
					id: uni.getStorageSync("userId"),
					name: this.formData.name,
					image: this.formData.image
				});
				if (res.code == 200) {
					uni.showToast({
						title: res.data,
						icon: 'success',
						duration: 2000,
						success: () => {
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/profile/profile"
								})
							}, 2000)
						}
					})
				}
			},
			// 计算缓存大小
			calculateCacheSize() {
				// 模拟获取缓存大小，实际应用中可能需要平台特定的API
				setTimeout(() => {
					// 随机生成缓存大小，介于5MB到50MB之间
					const size = Math.random() * 45 + 5;
					this.cacheSize = size.toFixed(2) + 'MB';
				}, 500);
			},
			// 清除缓存
			clearCache() {
				uni.showModal({
					title: '清除缓存',
					content: '确定要清除缓存吗？这不会删除您的账户数据。',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '清除中...'
							});

							// 清除本地缓存数据（除了登录信息）
							const userId = uni.getStorageSync('userId');
							uni.clearStorageSync();
							if (userId) {
								uni.setStorageSync('userId', userId);
							}

							// 模拟清除过程
							setTimeout(() => {
								uni.hideLoading();
								this.cacheSize = '0KB';
								uni.showToast({
									title: '缓存已清除',
									icon: 'success'
								});
							}, 1500);
						}
					}
				});
			},
			// 显示关于我们
			showAboutUs() {
				this.$refs.aboutUsPopup.open();
			},
			// 显示隐私协议
			showPrivacyPolicy() {
				this.$refs.privacyPopup.open();
			},
			// 关闭弹窗
			closePopup(popupRef) {
				this.$refs[popupRef].close();
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-top: 0;
		/* 移除原来的导航栏padding */
	}

	.edit-content {
		margin-top: 0;
		/* 调整顶部间距 */
		background: #fff;
		margin-bottom: 120rpx;
	}

	.section-title {
		padding: 30rpx 30rpx 10rpx;
		font-size: 28rpx;
		color: #666;
		background-color: #f8f8f8;
		font-weight: 500;
	}

	.edit-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1px solid #f5f5f5;
		background-color: #fff;
	}

	.item-label {
		font-size: 28rpx;
		color: #333;
	}

	.item-right {
		display: flex;
		align-items: center;
	}

	.cache-size {
		font-size: 28rpx;
		color: #999;
		margin-right: 10rpx;
	}

	.avatar-wrapper {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.avatar {
		width: 100%;
		height: 100%;
	}

	.avatar-mask {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40rpx;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.input {
		flex: 1;
		text-align: right;
		font-size: 28rpx;
		color: #333;
		padding: 0 20rpx;
	}

	.id-text {
		font-size: 28rpx;
		color: #999;
	}

	.income-text {
		color: #ff4785;
		font-weight: 500;
	}

	.bottom-save {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		background: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.save-button {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: linear-gradient(to right, #ff6b9a, #ff4785);
		color: #fff;
		font-size: 30rpx;
		border-radius: 40rpx;
		border: none;
		box-shadow: 0 6rpx 16rpx rgba(255, 71, 133, 0.3);
	}

	.save-button:active {
		opacity: 0.9;
		transform: scale(0.98);
	}

	/* 弹窗样式 */
	.popup-content {
		width: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		text-align: center;
	}

	.popup-text {
		margin-bottom: 30rpx;
	}

	.popup-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(to right, #ff6b9a, #ff4785);
		color: #fff;
		font-size: 30rpx;
		border-radius: 40rpx;
		margin-top: 30rpx;
	}

	.popup-btn:after {
		border: none;
	}

	.about-logo {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.about-logo image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 24rpx;
	}

	.about-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.app-name {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.app-version {
		font-size: 24rpx;
		color: #999;
	}

	.about-desc {
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		text-align: center;
	}

	.contact-info {
		display: block;
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #999;
	}

	/* 隐私协议弹窗 */
	.privacy-popup {
		max-height: 900rpx;
	}

	.privacy-content {
		max-height: 600rpx;
	}

	.privacy-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}

	.privacy-subtitle {
		display: block;
		font-weight: bold;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}

	.privacy-paragraph {
		display: block;
		margin-bottom: 20rpx;
		color: #666;
	}
</style>